﻿<!DOCTYPE HTML>
<html>
	 <head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no" />
         <title>Đoán chữ</title>
		<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
		<link rel="stylesheet" href="lib/font_awesome/css/font-awesome.min.css" />
		<link rel="stylesheet" href="css/onsen-css-components-default.css" />
		<link rel="stylesheet" href="css/image_view.css" />
   		<link rel="stylesheet" href="css/a.css" />
		<script type="text/javascript" src="cordova.js"></script>
		<script src="js/jquery-1.9.1.min.js"></script>
		<script src="js/jquery.mobile-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/js.js"></script>
        <script type="text/javascript" src="js/au.js"></script>
		<meta name="msapplication-tap-highlight" content="no" />
        <!--<script type="text/javascript">
            //For device
			var jsonQuestions = "";
			var currentLevel = 1;
            document.addEventListener("deviceready", onDeviceReady, false);
            function onDeviceReady(){
                //Load level
                loadData();
                
                //Init sounds
                initSounds();
                
                //Init file
                window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, loadFileSuccess, fail);
            }
        
            function loadFileSuccess(fileSystem) {
                dataDir = fileSystem.root.getDirectory("data", {create:true});
                dataFile = fileSystem.root.getFile("data/data.txt", {create:true, exclusive:false}, openFileSuccess, fail);
            }
        
            function openFileSuccess(fileEntry) {
                //fileEntry.createWriter(gotWriter, fail);
                fileEntry.file(gotReader, fail);
            }
            
            function gotWriter(writer) {
                writer.write("This is the content");
                alert("Wrote");
            }
        
            function gotReader(file) {
                var reader = new FileReader();
                reader.onloadend = function(evt) {
                    alert(evt.target.result);
                };
                reader.readAsText(file);
            }
        
            function fail(evt) {
                alert(evt.target.error.code);
            }
        </script>-->

        <!--This Script Block works on Browser. When build the app to devices, this block will be removed and be replaced with script in js.js by uncomment code above.-->
        <script type="text/javascript">
			var jsonQuestions = "";
			var currentLevel = 1;
			var dollar = 0;
			
            $(document).on("pageinit", "#main-content", function () {
                $.ajax({
                    url: 'question.json',
                    dataType: "json",
                    success: function (data) {
						jsonQuestions = data;
                        update(jsonQuestions[currentLevel-1]);
                    },
					error:function(a) {
						//alert(a.responseText);
					}
				});
            });

            function update(data) {
                $("#content-result").html("");
                $("#content-candidate").html("");
                $("#q-image").html('<img class="featured-image"  style="width:100%" src="' + data.imageUrl + '"/>');
                $("#result-valid").text(data.result);
                var qChar = data.result.split(" ");
                for (i = 0; i < qChar.length; i++) {
                    $("#content-result").append('<button class="button" onclick="handleResultTap(this);">&nbsp;&nbsp;</button>\n')
                }
                var possible = "ABCDEFGHIKLMNOPQRSTUVXY";
                for (var i = qChar.length; i < 14; i++)
                    qChar.push(possible.charAt(Math.floor(Math.random() * possible.length)));
                var cChar = shuffle(qChar);
                for (i = 0; i < cChar.length; i++) {
                    $("#content-candidate").append('<button class="button" onclick="handleCandidateTap(this);">' + cChar[i] + '</button>\n')
                }
                //Reload data for popup
                $("#popup-result-plain-text").html(data.fullResult);
                $("#popup-result-desc").html(data.desc);
            }

            function shuffle(array) {
                var currentIndex = array.length
                    , temporaryValue
                    , randomIndex
                ;
                // While there remain elements to shuffle...
                while (0 !== currentIndex) {
                    // Pick a remaining element...
                    randomIndex = Math.floor(Math.random() * currentIndex);
                    currentIndex -= 1;
                    // And swap it with the current element.
                    temporaryValue = array[currentIndex];
                    array[currentIndex] = array[randomIndex];
                    array[randomIndex] = temporaryValue;
                }

                return array;
            }

        </script>
     </head>
    <body class="page" >
        <div id="main-content" data-role="page">
		    <div class="tab-bar top-bar">
		      <label class="tab-bar__item">
		        <button class="tab-bar__button" onclick="changePage('index.html');">
		          <i class="tab-bar__icon fa fa-2x fa-home"></i>
		        </button>
		      </label>
		      <label class="tab-bar__item">
		        <button class="tab-bar__button" onclick="javascript:hint();">
		          <i class="tab-bar__icon fa fa-2x fa-flash"></i>
		        </button>
		      </label>
		      <label class="tab-bar__item">
		        <button class="tab-bar__button">
		          <span style="font-weight:bold; color:red;" id="main-current-level">Level: 1</span>
		        </button>
		      </label>
		      <label class="tab-bar__item">
		        <button class="tab-bar__button">
		          <i class="tab-bar__icon fa fa-2x fa-facebook"></i>
		        </button>
		      </label>
		      <label class="tab-bar__item">
		        <button class="tab-bar__button">
		          <i class="tab-bar__icon fa fa-2x fa-dollar">
		          	<span style="font-weidth:bold;" id="main-dollar">0</span>
		          </i>
		        </button>
		      </label>
		    </div>
            <div id="q-image" class="frame-for-featured-image">
                
            </div>
            <div class="image-frame bottom-result" style="text-align:center;">
                <div id="content-result">
                    
                </div>
                <input type="hidden" value="" id="result-valid" />
            </div>
            <div class="image-frame bottom-candidate" style="text-align:center;">
                <div id="content-candidate">
                    
                </div>
            </div>

            <!--Popup CORRECT-->
            <div data-role="popup" id="popup-correct" data-theme="b" data-overlay-theme="b">
                <div align="center">
                    <img src="images/gold-box.png" />
                    <h3 style="color:lawngreen;" id="popup-conform-message">Chính cmn xác!</h3>
                    <p style="color:gold;">+20 $</p>
                    <h2 style="font-weight:bold;" id="popup-result-plain-text"></h2>
                    <p style="font-size:small; padding:2px;"><i id="popup-result-desc"></i></p>
                    <br />
                    <button class="button" style="background-color:forestgreen; width:100px;" onclick="pressItemSound(); next();"> Tiếp </button>
                	<br />
                </div>
            </div>
            <!--Popup WRONG-->
            <div data-role="popup" id="popup-wrong" data-theme="a" style="padding:5px; background-color:lightpink;">
                Đáp án không chính xác ! (-5 $)
            </div>
    </body>
</html>

